<template>
	<view class="es-tabs-wrapper" :style="{background:background,borderRadius:borderRadius}">
		<block v-for="(item,index) in tabList">
			<view v-if="index!=0" class="es-tabs__line"
				:class="{'es-tabs__line--transparent':
				(index==1 && current==0) || (index==1 && current==1) 
				|| (index==2 && current==1)  || (index==2 && current==2) 
				|| (index==3 && current==2) 	|| (index==3 && current==3) 
				}"></view>
			<!-- 左边背景 -->
			<image v-if="index==0 && current==0" src="/static/images/tabs/side.png"
				class="es-tabs__side es-tabs__side--left"></image>
			<!-- 中间背景 -->
			<image v-else-if="index==1 && current== 1" src="/static/images/tabs/center.png"
				class="es-tabs__center" style="left:166rpx"></image>
			<image v-else-if="index==2 && current== 2" src="/static/images/tabs/center.png"
				class="es-tabs__center" style="left:353rpx"></image>
			<!-- 右边背景 -->
			<image v-if="index==3 && current==3" src="/static/images/tabs/side.png"
				class="es-tabs__side es-tabs__side--right"></image>
	
			<view class="es-tabs-item" @tap="onChangeTab(index)">
				<view class="es-tabs__dots"></view>
				<text class="es-tabs__name" :style="{color:index == current?activeColor:color}">{{item.name}}</text>
				<view class="es-tabs__dots" :style="index == current?'background:' + background:''"></view>
			</view>
		</block>
	
	</view>
</template>

<script>
	export default {
		props:{
			current:{
				type:Number,
				default:0
			},
			// 固定必须4条数据,否则样式错乱
			tabList:Array,
			//背景色
			background:{
				type:String,
				default:"linear-gradient(90deg, #47dabd, #45D4A8)"
			},
			//字体颜色
			color:{
				type:String,
				default:"#ffffff"
			},
			//选中的字体颜色
			activeColor:{
				type:String,
				default:"#45D4A8"
			},
			//圆角
			borderRadius:{
				type:String,
				default:"8rpx 8rpx 0rpx 0rpx;"
			}
		},
		methods:{
			onChangeTab(index){
				this.$emit("change",index);
			}
		}
		
	}
</script>

<style>
	.es-tabs-wrapper {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.es-tabs-item {
		flex: 1;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}

	.es-tabs__line {
		width: 2rpx;
		height: 30rpx;
		background-color: rgba(255, 255, 255, 0.4);
	}

	.es-tabs__line--transparent {
		background-color: rgba(255, 255, 255, 0);
	}

	.es-tabs__name {
		font-size: 30rpx;
		font-weight: Bold;
		color: #FFFFFF;
		margin: 5rpx 0;
	}

	.es-tabs__dots {
		width: 42rpx;
		height: 8rpx;
		background: linear-gradient(90deg, transparent, transparent);
		border-radius: 4rpx;
	}

	.es-tabs__side {
		width: 210rpx;
		height: 80rpx;
		position: absolute;
		top: 0;
	}

	.es-tabs__side--left {
		left: 0;
		transform: scaleX(1);
	}

	.es-tabs__side--right {
		right: 0;
		transform: scaleX(-1);
	}

	.es-tabs__center {
		width: 230rpx;
		height: 80rpx;
		position: absolute;
		top: 0;
	}
</style>